<script lang="ts" setup>
const timelineItems = ref([
  { date: '2024-09-10', content: '新品上架：秋季新款服装', color: '#00CCFF' },
  { date: '2024-09-09', content: '促销活动：全场满100减20', color: 'green' },
  { date: '2024-09-08', content: '物流通知：订单配送速度提升', color: '#00CCFF' },
  { date: '2024-09-07', content: '技术更新：网站加载速度优化', color: 'blue' },
  { date: '2024-09-06', content: '客服公告：在线客服24小时服务', color: 'orange' },
  { date: '2024-09-05', content: '活动预告：周末限时折扣', color: '#00CCFF' },
  { date: '2024-09-04', content: '合作新闻：与知名品牌达成合作', color: 'green' },
  { date: '2024-09-03', content: '库存更新：热销商品补货完成', color: '#00CCFF' },
  { date: '2024-09-02', content: '用户反馈：好评率提升', color: 'blue' },
  { date: '2024-09-01', content: '功能升级：购物车功能优化', color: 'orange' },
  { date: '2024-08-31', content: '支付方式：新增多种支付选项', color: '#00CCFF' },
  { date: '2024-08-30', content: '系统维护：网站稳定性增强', color: 'green' },
  { date: '2024-08-29', content: '促销活动：买一赠一限时优惠', color: '#00CCFF' },
  { date: '2024-08-28', content: '物流通知：新增多个配送中心', color: 'blue' },
  { date: '2024-08-27', content: '技术更新：移动端体验优化', color: 'orange' },
  { date: '2024-08-26', content: '客服公告：增加多语言支持', color: '#00CCFF' },
  { date: '2024-08-25', content: '活动预告：国庆节特别促销', color: 'green' },
  { date: '2024-08-24', content: '合作新闻：与物流公司签订合作协议', color: '#00CCFF' },
  { date: '2024-08-23', content: '库存更新：新商品入库', color: 'blue' },
  { date: '2024-08-22', content: '用户反馈：用户满意度调查结果公布', color: 'orange' }
])
</script>

<template>
  <a-card class="latest-news">
    <div class="title">最新动态</div>
    <a-timeline class="latest-news-timeline">
      <!-- 动态项 -->
      <a-timeline-item v-for="(item, index) in timelineItems" :key="index" :color="item.color">
        <span>{{ item.date }}</span
        ><br />
        <span>{{ item.content }}</span>
      </a-timeline-item>
    </a-timeline>
  </a-card>
</template>

<style scoped>
.title {
  font-size: 15px;
  margin-bottom: 20px;
}
.latest-news {
  overflow: hidden;
}
.latest-news-timeline {
  height: 378px;
  overflow-x: auto;
}
</style>
